<template>
    <div>
        <div class="search" style="margin-left: 5%;margin-bottom: 5%">
            <el-input
                placeholder="商品名"
                prefix-icon="el-icon-search"
                v-model="search_name"
                style="width: 500px; margin-right: 10px; margin-bottom: 10px"
                clearable>
            </el-input>
            <el-input
                placeholder="价格下界"
                prefix-icon="el-icon-search"
                v-model="search_price1"
                style="width: 150px; margin-left: 10px; margin-bottom: 10px"
                clearable>
            </el-input>
            -
            <el-input
                placeholder="价格上界"
                prefix-icon="el-icon-search"
                v-model="search_price2"
                style="width: 150px; margin-right: 10px; margin-bottom: 10px"
                clearable>
            </el-input>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
        <el-col style="width: 27%; margin-left: 5%; margin-bottom: 5%" v-for="item in itemData" :key="item.itemId" :offset="1">
            <el-card shadow="hover" :body-style="{ padding: '1%' }">
                <el-image :src="getImage(item.image)"  class="image"/>
                <div style="padding: 14px;">
                    <span>{{ item.name }}</span>
                    <div class="bottom clearfix">
                        ￥{{ item.price }}
                        <el-button type="text" class="button" @click="detailVisible = true, detail(item)" style="margin-left: 5%">详细信息</el-button>
                        <el-button @click="pwdDialog = true" type="text" class="button" style="margin-left: 6%;">
                            购买
                        </el-button>
                        <el-dialog
                            title="请输入密码"
                            :visible.sync="pwdDialog"
                            width="30%"
                            :before-close="handleClose">
                            <el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="pwdDialog = false">取 消</el-button>
                                <el-button type="primary" @click="pwdDialog = false, buy(item)">确 定</el-button>
                            </span>
                        </el-dialog>
                    </div>
                    <el-dialog title="商品信息" :visible.sync="detailVisible">
                        <el-descriptions>
                            <el-descriptions-item label="商品名">{{ detailData.item.name }}</el-descriptions-item>
                            <el-descriptions-item label="价格">{{ detailData.item.price }}</el-descriptions-item>
                            <el-descriptions-item label="商家">{{ detailData.item.sellerId }}</el-descriptions-item>
                            <el-descriptions-item label="库存">{{ detailData.item.count }}</el-descriptions-item>
                            <el-descriptions-item label="详细信息">{{ detailData.item.itemDescription }}</el-descriptions-item>
                        </el-descriptions>
                    </el-dialog>
                </div>
            </el-card>
        </el-col>
    </div>
</template>

<style>
.bottom {
    margin-top: 13px;
    line-height: 12px;
}
.button {
    padding: 0;
    float: right;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}
.image {
    height: 400px;
    object-fit: contain;
    display: flex;
    justify-content: center;
}
.white {
    background: #ffffff;
}
.white {
    border-radius: 4px;
    min-height: 36px;
}
</style>

<script>
import axios from "axios";
import md5 from 'js-md5';

export default {
    item: ["name", "price", "itemId", "sellerId", "itemDescription", "count", "image"],
    data(){
        return {
            itemData: [],
            search_name:"",
            search_price1:'',
            search_price2:'',
            detailVisible: false,
            pwdDialog: false,
            direction: 'btt',
            num: 1,
            pwd: '',
            detailData : {
                item:[],
            }
        }
    },
    created() {
        this.load()
    },
    methods:{
        load(){
            axios.get('http://10.196.198.178/item').then(res=>{
                console.log(res.data);
                if(String(res.data.code) === '0') {
                    this.$notify.error({
                        title: '错误',
                        message: res.data.msg
                    });
                }else{
                    this.itemData = res.data.data;
                }
            })
        },
        getImage(image){
            return `http://10.196.198.178${image}`
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        handleChange(value) {
            console.log(value);
        },
        buy(item){
            const order={
                sellerId: item.sellerId,
                itemId: item.itemId,
                totalPrice: item.price,
                orderStateString: 0,
                complaintRecord: item.itemDescription
            }
            axios.post('http://10.196.198.178/item/'+md5(this.pwd), order)
                .then((res)=> {
                    console.log(res);
                    if(String(res.data.code) === '1'){
                        this.$notify({
                            title: '成功',
                            message: '商品购买成功！',
                            type: 'success'
                        });
                        this.load();
                    }else{
                        this.$notify.error({
                            title: '错误',
                            message: res.data.msg
                        });
                    }
                })
                .catch((error)=> {
                    console.log(error);
                    alert('输入格式错误');
                });
        },
        detail(item){
            this.detailData.item = item;
        }
    }
}
</script>
